<template>
    <div>
        <p>计数: {{ counter.count }}</p>
        <p>双倍计数: {{ counter.doubleCount }}</p>
        <p>Store名称: {{ counter.name }}</p>
        <button @click="counter.increment()">增加</button>
        <button @click="counter.decrement()">删除</button>
        <ul>
            <li v-for="i in arr" :key="i.id">{{ i.id }} - {{ i.time }}></li>
        </ul>
        
    </div>
</template>

<script setup>
    import { useCounterStore } from './storers/counter'
    import { watch } from 'vue'

    const counter = useCounterStore()
    const arr = counter.arr

    counter.$subscribe((mutation, state) => {
        console.log(mutation, state)
    })

    watch(() => counter.count, (count) => {
        console.log('发生了改变：', count)
    })
</script>